import React, { Component } from 'react'
import { Redirect,Route,Switch } from 'react-router-dom';
import { Layout } from 'antd';
import { connect } from 'react-redux';
import LeftNav from '@/components/left-nav/left-nav';
import Header from '@/components/header/header';
import Home from '../home/home';
import Role from '../role/role';
import Category from '../category/category';
import Product from '../product/product';
import User from '../user/user';
import Bar from '../chats/bar';
import Line from '../chats/line';
import Pie from '../chats/pie';
import NotFound from '../not-found/not-found';

const { Footer, Sider, Content } = Layout;


//管理的路由组件
 class Admin extends Component {
  render() {
    const user=this.props.user;
    if(!user||!user._id){
      //自动跳转到登陆(在render()中)
      return <Redirect to='/login' />
    }
    return (
      <Layout style={{minHeight:"100vh"}}>
      <Sider>
        <LeftNav/>
      </Sider>
      <Layout>
        <Header>Header</Header>
        <Content style={{margin:20,backgroundColor:'#fff'}}>
          <Switch>
            <Redirect exact={true} from="/" to="/home"/>
            <Route path='/home' component={Home}></Route>
            <Route path='/category' component={Category}></Route>
            <Route path='/product' component={Product}></Route>
            <Route path='/role' component={Role}></Route>
            <Route path='/user' component={User}></Route>
            <Route path='/charts/bar' component={Bar}></Route>
            <Route path='/charts/line' component={Line}></Route>
            <Route path='/charts/pie' component={Pie}></Route>
            <Route component={NotFound}/>   {/**上面没一个匹配直接显示 */}
          </Switch>
        </Content>
        <Footer style={{textAlign:'center',color:'#ccc'}}>推荐使用谷歌浏览器，可以获得更佳页面操作体验</Footer>
      </Layout>
    </Layout>
    )
  }
}

export default connect(
  state=>({user:state.user}),
  {}
)(Admin)
